<template>
    <el-dialog v-model="dialogFormVisible" lock-scroll :close-on-click-modal="false" :close-on-press-escape="false"
        :show-close="false">
        <el-form :model="form">
            <el-form-item>
                <el-input v-model="form.url" placeholder="请输入网址..." autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button :disabled="form.isSubmit" @click="handleCancel">取消</el-button>
                <el-button type="primary" :disabled="form.isSubmit" @click="handleAdd">
                    添加
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import userWebSiteStore from "@store/webSiteStore";
const { dialogFormVisible, setIsDialogFormVisible } = inject("dialog-Visible");

const webSiteStore = userWebSiteStore();
const form = reactive({
    url: '',
    isSubmit: false
});
// 添加
const handleAdd = async () => {
    if(form.url.trim()===''){
        ElMessage.error('请输入完整的URL地址');
        return;
    }
    form.isSubmit = true;
    const res = await myApi.sendUrl(form.url);
    if (res.msg) {
        myApi.alert(res.msg);
    } else {
        webSiteStore.add(res)
    }

    handleCancel();
}
//取消
const handleCancel = () => {
    form.url = "";
    form.isSubmit = false;
    setIsDialogFormVisible(false)
}

</script>